<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="home-container">
    <el-card class="welcome-card">
      <h1>欢迎回来，{{ username }}</h1>
      <p>您已成功登录系统</p>
      <el-button type="danger" @click="handleLogout">退出登录</el-button>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

export default {
  name: 'HomePage',
  setup() {
    const router = useRouter()
    const username = ref('')

    onMounted(() => {
      const user = JSON.parse(localStorage.getItem('user') || '{}')
      username.value = user.username || '用户'
    })

    const handleLogout = () => {
      localStorage.removeItem('user')
      ElMessage.success('已退出登录')
      router.push('/login')
    }

    return {
      username,
      handleLogout
    }
  }
}
</script>

<style scoped>
.home-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f7fa;
}

.welcome-card {
  width: 500px;
  text-align: center;
  padding: 40px;
}

h1 {
  color: #409EFF;
  margin-bottom: 20px;
}
</style> 